<template>
  <div class="question_div">
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="我的提问" name="2">
        <el-card v-for="item in questions" :key="item.questionId" style="margin-bottom: 20px;text-align: left;border-left: 2px solid green">
          <div>
            <div style="font-size: 14px; color: gray">
              <span style="margin-right: 20px">来自</span>
              <span>{{item.courseTitle}}</span>
            </div>
            <div style="font-weight: bold; margin: 5px 0px 10px;font-size: 20px">
              <span style="cursor: pointer;" @click="toQuestion(item.questionId)">{{item.title}}</span>
            </div>
            <div style="font-size: 15px; color: lightslategray">
              <div class="di" style="margin-right: 30px">
                <span>{{item.createTime.substring(0,10)}}</span>
              </div>
              <div class="di">

                <span>{{item.answerSize}}</span>
                <span>个回答</span>
              </div>
            </div>
          </div>
        </el-card>
        <el-card style="text-align: center;font-size: 14px;color: gray" v-if="questions.length==0">
          暂无数据
        </el-card>
      </el-tab-pane>
<!--      <el-tab-pane label="我的回答" name="1">-->
<!--        <div>我的回答</div>-->
<!--      </el-tab-pane>-->
      <el-tab-pane label="我的关注" name="0">
        <el-card v-for="item in follows" :key="item.questionId" style="margin-bottom: 20px;text-align: left;border-left: 2px solid green">
          <div>
            <div style="font-size: 14px; color: gray">
              <span style="margin-right: 20px">来自</span>
              <span>{{item.courseTitle}}</span>
            </div>
            <div style="font-weight: bold; margin: 5px 0px 10px;font-size: 20px">
              <span style="cursor: pointer;" @click="toQuestion(item.questionId)">{{item.title}}</span>
            </div>
            <div style="font-size: 15px; color: lightslategray">
              <div class="di" style="margin-right: 30px">
                <span>{{item.createTime.substring(0,10)}}</span>
              </div>
              <div class="di">

                <span>{{item.answerSize}}</span>
                <span>个回答</span>
              </div>
            </div>
          </div>
        </el-card>
        <el-card style="text-align: center;font-size: 14px;color: gray" v-if="follows.length==0">
          暂无数据
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'Question',
  data () {
    return {
      activeName: '2',
      questions: '',
      follows: ''
    }
  },
  mounted () {
    this.getMyQuestion()
    this.getFollow()
  },
  computed: mapState({
    user: 'user'
  }),
  methods: {
    // 标签点击
    handleClick (tab, event) {
      // this.getCourseByTId(tab.name)
      // eslint-disable-next-line eqeqeq
      if (tab.name == 0) {
      //  this.getPageCourse(tab.name, 1, 0, this.pageSize)
      } else {
      //  this.getPageCourse(tab.name, 1, 2, this.pageSize)
      }
    },
    getMyQuestion () {
      var _this = this
      var queryData = {}
      queryData.userId = this.user.userId
      this.$axios.post('/api/question/getMyQuestion',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.questions = data.result
        }
      })
    },
    getFollow () {
      var _this = this
      var queryData = {}
      queryData.userId = this.user.userId
      this.$axios.post('/api/question/getFollowQuestion',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.follows = data.result
        }
      })
    },
    toQuestion (questionId) {
      this.$router.push(
        {path: '/question',
          query: {
            questionId: questionId
          }
        }
      )
    }
  }
}
</script>

<style scoped>
  .di {
    display: inline-block;
  }
</style>
